<template>
  <view class="teacher">
    <view class="take">
      <view class="sort" v-for="(item, index) in list" :key="index">
        <view class="user">
          <avatar :src='setUrl(item.avatar)' styles='width: 54rpx; height: 54rpx;'></avatar>
          <view class="name">{{ item.nickname }}</view>
        </view>
        <view class="content">{{ item.bio }}</view>
        <template v-if="item.lessons && item.lessons.length">
          <template v-for="(dt, idx) in item.lessons" :key="idx">
            <course :detail='dt' v-if="idx < 3"></course>
          </template>
        </template>
      </view>
      
    </view>
  </view>
</template>

<script setup>
import course from './course.vue';
// import { onLoad } from '@dcloudio/uni-app';
import { get } from '@/api';
import { setUrl } from '@/common';
import { ref, onMounted } from 'vue';

let list = ref([]);

onMounted(() => {
  getList();
})

function getList(){
  const params = {
    page: 1
  }
  get('/api/lesson/getFamousTeacherLessons', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      list.value = data;
    }
  })
}

defineExpose({
  getList
})
</script>

<style lang="scss" scoped>
  .teacher{
    padding: 0 30rpx;
    position: relative;
    z-index: 2;
    .take{
      width: 100%;
      border-radius: 18rpx;
      padding: 40rpx 26rpx;
      padding-top: 0;
      background-color: rgba(255, 255, 255, .37);
      .sort{
        border-bottom: 1px solid #EFEFEF;
        padding-top: 30rpx;
        &:last-child{
          border-bottom: 0;
        }
        .content{
          font-weight: 400;
          font-size: 26rpx;
          color: #737373;
          padding-bottom: 40rpx;
        }
        .user{
          display: flex;
          align-items: center;
          padding-bottom: 20rpx;
          .name{
            font-weight: 400;
            font-size: 26rpx;
            color: #000000;
            padding-left: 20rpx;
          }
        }
      }
    }
  }
</style>